<script>
	export default{
		data(){
			return{
				divClass:'small',
				isActive:false,
				sex:1,
				charStr:'Z',
        userinfos:[{"id":1,"name":"张三","sex":"0"},
          {"id":2,"name":"李四","sex":"0"},
          {"id":3,"name":"王五","sex":"1"}]
			}
		},
		methods:{
			changSize(size){
				this.divClass=size
			}
		},
		computed:{
			sexMessage(){
				return this.sex == 0 ? '男' : '女'
			}
		}
	}
</script>

<template>
	<div :class="divClass"></div>
	<button @click="changSize('small')">变小</button>
	<button @click="changSize('big')">变大</button>
	
	
	<div class="divDefault" :class="{active:isActive}"></div>
	
	<!-- v-if -->
	  <h1 v-if="sex == 0">男</h1>
	  <h1 v-else>女</h1>
	
	  <!-- v-show -->
	  <h1 v-show="sex == 0">男</h1>
	  <!--
	    v-if v-show区别是什么？
	    v-if修改的dom，如果v-if条件不成立，此dom就会从html删除
	    v-show， 如果说显示条件不成立，会在dom上添加一个style="display:none;"
	  -->
	  <!-- 计算属性 -->
	  <h1>{{sexMessage}}</h1>
	
	  <h1 v-if="charStr == 'A'">A</h1>
	  <h1 v-else-if="charStr == 'B'">B</h1>
	  <h1 v-else-if="charStr == 'C'">C</h1>
	  <h1 v-else>not a b c</h1>

  <table>
    <tr>
      <td>序号</td>
      <td>ID</td>
      <td>Name</td>
      <td>Sex</td>
    </tr>
    <!--遍历userinfos,取出各个对象的属性-->
    <tr v-for="(userinfo, index) in userinfos">
      <td>{{index+1}}</td>
      <td>{{userinfo.id}}</td>
      <td>{{userinfo.name}}</td>
      <td>{{userinfo.sex == '0' ? "男":"女"}}</td>
    </tr>
  </table>


</template>


<style>
	.big{
		width: 200px;
		height: 200px;
		background-color: antiquewhite;
	}
	
	.small{
		width: 100px;
		height: 100px;
		background-color: aqua;
	}
	
</style>